<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>九宫格</title>
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
    <style type="text/css">
        *{
            margin: 0;
            border: 0;
            padding: 0;
            font-style: normal;
            color: #323232;
            box-sizing: border-box;
            -moz-box-sizing:border-box; /* Firefox */
            -webkit-box-sizing:border-box; /* Safari */
        }
        html,body{
            background: #fff;
        }
        .box{
            /*left: 0;*/
            /*top:0;*/
            /*right: 0;*/
            /*bottom: 0;*/
            /*background-color: #323232;*/
            /*position: absolute;*/
        }
        .item{
            float: left;
            width: 32%;
            height: 32%;
            text-align: center;
            /*border: 1px solid #ccc;*/
            padding-top: 31%;
            margin-left: 1%;
            margin-top: 1%;
            position: relative;
            background-color: darkorange;
            border-radius: 10px;
        }
        .item>div{
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            /*background-color: blue;*/

        }
        .item>div>span{
            display: inline-block;
            margin-top: 50%;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
        }
    </style>
</head>
<body>
<div class="box">
    <div class="item"><div><span>1</span></div></div>
    <div class="item"><div><span>2</span></div></div>
    <div class="item"><div><span>3</span></div></div>
    <div class="item"><div><span>4</span></div></div>
    <div class="item"><div><span>5</span></div></div>
    <div class="item"><div><span>6</span></div></div>
    <div class="item"><div><span>7</span></div></div>
    <div class="item"><div><span>8</span></div></div>
    <div class="item"><div><span>9</span></div></div>
</div>
</body>
</html>
